<template>
  <div class="app-container">
      <div class="filter-container">
        <el-button type="primary" @click="addReceptionClick()">新增</el-button>
        <el-button type="primary" @click="analyzeClick()">分析</el-button>
        <el-input clearable v-model="search.orderNum" placeholder="客户" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.orderName" placeholder="联系电话" style="width: 170px;margin:0 5px;"></el-input>
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-select v-model="search.indentionState" clearable placeholder="意向状态" style="width: 130px; margin-left:5px;">
            <el-option 
            v-for="(item,index) in selectOptions.indentionState"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="接待单号">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="客户姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="到店次数">
        <template slot-scope="scope">
          <span>{{ scope.row.onshoptime }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="接洽方式">
        <template slot-scope="scope">
          <el-tag :type="['info','success',''][scope.row.contacttype]">{{scope.row.contacttype | parseContactType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="客户来源">
        <template slot-scope="scope">
          <el-tag :type="['info','success',''][scope.row.customersource]">{{scope.row.customersource | parseCustomerSource }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="意向车型">
        <template slot-scope="scope">
          <span>{{ scope.row.intentioncar }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="期望价格">
        <template slot-scope="scope">
          <span>{{ scope.row.intentionprice }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="自店报价">
        <template slot-scope="scope">
          <span>{{ scope.row.shopprice }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="销售顾问">
        <template slot-scope="scope">
          <span>{{ scope.row.guider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="接待类型">
        <template slot-scope="scope">
          <el-tag :type="['info','success',''][scope.row.receptiontype]">{{scope.row.receptiontype | parseReceptiontype }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="是否有效">
        <template slot-scope="scope">
          <el-tag :type="['info','success',''][scope.row.state]">{{ (scope.row.state?'有效' : '无效') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="来访日期">
        <template slot-scope="scope">
          <span>{{ scope.row.receptiontime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="300" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="modifyClick(scope.row.id)">修改</el-button>
          <el-button type="primary" size="small" @click="intentionClick(scope.row.id)">转意向</el-button>
          <el-popconfirm title="确定要删除这条记录吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="deleteClick(scope.row.id)" >
            <el-button slot="reference" type="danger" size="small" style="margin-left:5px;" >
                删除
            </el-button>
          </el-popconfirm>
          <router-link :to="'/presalemanage/reception/recorddetails/'+scope.row.id">
            <el-button type="primary" size="small" style="margin-left:5px;">
              详情
            </el-button>
          </router-link>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

<!-- 新增接待记录 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible"  width="900px">
        <div class="ci" v-show="dialog.step===1">
          <div class="item">
            <span class="name required">客户联系电话</span>
            <span class="value">
              <el-input clearable v-model="dialog.data.phone" maxlength="15" placeholder="" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
              <span class="name"></span>
            <span class="value">
              <el-button type="primary" @click="addReceptionPhoneCheck()">确定</el-button>
            </span>
          </div>
        </div>
        <!-- 已经存在接待记录 -->
        <div class="ci" v-show="dialog.step===2">
          <div class="item hauto ld">
              <fieldset>
                <legend>基本信息</legend>
                <div class="fd-content">
                    <div class="fd-item"><span class="name">联系人姓名：</span><span>{{dialog.data.customerName}}</span></div>
                    <div class="fd-item"><span class="name">微信</span><span>{{dialog.data.customerWeixin}}</span></div>
                    <div class="fd-item"><span class="name">详细地址</span><span>{{dialog.data.customerAddress}}</span></div>
                </div>
              </fieldset>
          </div>
          <div class="item">
            <span class="name">接洽方式：</span>
            <span class="value">
              {{dialog.data.contactType | parseContactType}}
            </span>
          </div>
          <div class="item">
            <span class="name">客户来源</span>
            <span class="value">
               {{dialog.data.customerSource | parseCustomerSource}}
            </span>
          </div>
          <div class="item">
            <span class="name required">购车次数</span>
            <span class="value">
              {{dialog.data.buytimes}}
            </span>
          </div>
          <div class="item">
            <span class="name required">销售顾问</span>
            <span class="value">
              {{dialog.data.guider}}
            </span>
          </div>
          <div class="item">
            <span class="name required">未完成订单</span>
            <span class="value">
              无 / 购车合同号
            </span>
          </div>
          <div class="item">
            <span class="name required">接待类型</span>
            <span class="value">
              售前客户接待 / 待交车客户接待
            </span>
          </div>
          <div class="item">
            <span class="name required">来访人数</span>
            <span class="value">
              <el-input type="number" clearable v-model="dialog.data.visitorNumber" placeholder="" style="width:100px;" ></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">备注</span>
            <span class="value">
              <el-input type="textarea" :rows="2" clearable v-model="dialog.data.remark" placeholder="" ></el-input>
            </span>
          </div>
        </div>
        <!-- end 已经存在接待记录 -->
        <!-- 新的接待记录 -->
        <div class="ci" v-show="dialog.step===3">
          <div class="item hauto ld">
              <fieldset>
                <legend>客户基本信息</legend>
                <div class="fd-content">
                    <div class="fd-item">
                        <span class="name">客户姓名：</span>
                        <span><el-input clearable v-model="dialog.data.customerName" placeholder="" style="width:200px;" ></el-input></span>
                    </div>
                    <div class="fd-item">
                        <span class="name">性别</span>
                        <span>
                            <el-radio-group v-model="dialog.data.customerGender">
                                <el-radio-button label="男"></el-radio-button>
                                <el-radio-button label="女"></el-radio-button>
                            </el-radio-group>
                        </span>
                    </div>
                    <div class="fd-item">
                        <span class="name">微信：</span>
                        <span><el-input clearable v-model="dialog.data.customerWeixin" placeholder="" style="width:200px;" ></el-input></span>
                    </div>
                    <div class="fd-item">
                        <span class="name">客户来源：</span>
                        <span>
                            <el-select v-model="dialog.data.customerSource" clearable placeholder="--" style="width: 130px;">
                                <el-option 
                                v-for="(item,index) in selectOptions.customerSource"
                                :key="index"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="fd-item">
                        <span class="name">购车次数</span>
                        <span><el-input type="number" clearable v-model="dialog.data.buytimes" placeholder="" style="width:100px;" ></el-input></span>
                    </div>
                    <div class="fd-item">
                        <span class="name">详细地址</span>
                        <span>
                            <bx-address :address-info="dialog.data.customerAddressInfo"></bx-address>
                        </span>
                    </div>
                </div>
              </fieldset>
          </div>
          <div class="item hauto ld">
              <fieldset>
                <legend>到访信息</legend>
                <div class="fd-content">
                    <div class="fd-item">
                        <span class="name">接洽方式：</span>
                        <span>
                            <el-select v-model="dialog.data.contactType" clearable placeholder="--" style="width: 130px;">
                                <el-option 
                                v-for="(item,index) in selectOptions.contactType"
                                :key="index"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="fd-item">
                        <span class="name">开始时间：</span>
                        <span>
                            <el-date-picker v-model="dialog.data.starttime" type="datetime" placeholder=""></el-date-picker>
                        </span>
                        <span class="name" style="padding-left:10px;">结束时间：</span>
                        <span>
                            <el-date-picker v-model="dialog.data.endtime" type="datetime" placeholder=""></el-date-picker>
                        </span>
                    </div>
                    <div class="fd-item">
                        <span class="name">来访人数：</span>
                        <span>
                            <el-input type="number" clearable v-model="dialog.data.visitorNumber" placeholder="" style="width:100px;" ></el-input>
                        </span>
                        
                    </div>
                    <div class="fd-item">
                        <span class="name" style="padding-left:10px;">销售顾问：</span>
                        <span>
                            <el-input clearable v-model="dialog.data.guider" placeholder="" style="width:150px;" ></el-input>
                        </span>
                    </div>
                </div>
              </fieldset>
          </div>
          <div class="item hauto ld">
              <fieldset>
                  <legend>意向选择</legend>
                  <div class="fd-content">
                      <div class="fd-item">
                          <span class="name">意向车型</span>
                          <span><el-input clearable v-model="dialog.data.intentionCar" placeholder="" ></el-input></span>
                      </div>
                      <div class="fd-item">
                          <span class="name">客户期望</span>
                          <span><el-input clearable v-model="dialog.data.intentionPrice" placeholder="期望价格..." ></el-input></span>
                      </div>
                      <div class="fd-item">
                          <span class="name">自店报价</span>
                          <span><el-input clearable v-model="dialog.data.shopPrice" placeholder="本店价格..." ></el-input></span>
                      </div>
                      <div class="fd-item">
                          <span class="name required">备注</span>
                          <span class="value" style="flex:1">
                            <el-input type="textarea" :rows="2" clearable v-model="dialog.data.remark" placeholder="" style="width:100%;"></el-input>
                          </span>
                      </div>
                  </div>
              </fieldset>
          </div>
        </div>
        <!-- end 新的接待记录 -->
        <div slot="footer" class="dialog-footer" v-show="dialog.step>1">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="saveReceptionClick()" :loading="dialog.saveloading">保 存</el-button>
        </div>
    </el-dialog>
<!-- end 新增接待记录 -->
<!-- 转意向 -->
<el-dialog :title="dialogIntention.title" :visible.sync="dialogIntention.visible"  width="700px">
    <div class="ci">
        <div class="item">
        <span class="name required">意向等级</span>
        <span class="value">
            <el-select v-model="dialogIntention.data.intentionLevel" clearable placeholder="--" style="width: 220px;">
                <el-option 
                v-for="(item,index) in selectOptions.intentionLevel"
                :key="index"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            
        </span>
        </div>
        <div class="item">
        <span class="name required">意向车型</span>
        <span class="value">
            <el-input clearable v-model="dialogIntention.data.car" placeholder="" style="width: 220px;"></el-input>
        </span>
        </div>
        <div class="item">
        <span class="name required">联系电话</span>
        <span class="value">
            <el-input clearable v-model="dialogIntention.data.phone" maxlength="15" placeholder="" style="width: 220px;"></el-input>
        </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogIntention.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveIntentionClick()" :loading="dialogIntention.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 转意向 -->

  </div>
</template>

<script>
import * as receptionApi from '@/api/presale/reception'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import BxAddress from '@/components/BxAddress'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'


export default {
  name: 'RecordList',
  components: { Pagination,BxAddress },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        name:'',
        phone:'',
        state:-1,
        daterange:''
      },
      search:{
        name:'',
        phone:'',
        daterange:'',
        indentionState:'0',
      },
      selectOptions:{
          indentionState:[],
          customerSource:[],
          contactType:[],
          intentionLevel:[],
      },
      dialog:{
          visible:false,
          saveloading:false,
          title:'',
          originTitle:'新增接待记录',
          step:1,
          //数据
          data:{
            phone:'',
            starttime:'',
            endtime:'',
            customerName:'',
            customerGender:1,
            customerWeixin:'',
            customerSource:0,
            buytimes:0,
            contactType:0,
            visitorNumber:0,
            guider:'',
            intentionCar:'',
            intentionPrice:0,
            shopPrice:0,
            remark:'',
            customerAddressInfo:{
                province:{name:'',code:''},
                city:{name:'',code:''},
                district:{name:'',code:''},
                details:'',
                merge:'', //合并一起的地址
                isvalid:false //效验
            }
          }
      },
      dialogIntention:{
          visible:false,
          saveloading:false,
          title:'转意向',
          data:{
              phone:'',
              intentionLevel:'',
              car:''
          }
      }
    }
  },
  created(){
      var that=this;
      that.getList();

      //初始化下拉菜单
      enumHelper.initOptions(that.selectOptions.customerSource,enumHelper.presale.customerSource);
      enumHelper.initOptions(that.selectOptions.intentionLevel,enumHelper.presale.intentionLevel);
      enumHelper.initOptions(that.selectOptions.contactType,enumHelper.presale.contactType);
  },
  filters:{
    parseReceptiontype(state){
      return enumHelper.presale.receptionType.getName(state);
    },
    parseContactType(state){
      return enumHelper.presale.contactType.getName(state);
    },
    parseCustomerSource(state){
      return enumHelper.presale.customerSource.getName(state);
    },
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      receptionApi.getRecordList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total;

         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.name=that.search.name.trim();
      that.listQuery.phone=that.search.phone.trim();
      that.listQuery.daterange=that.search.daterange;
      that.listQuery.state=(that.search.indentionState !=='' ? that.search.indentionState : -1);
      that.getList();
    },
    modifyClick(id){
        var that=this;
        var modifyItem=that.list.filter(o=>o.id==id)[0];
        if(!modifyItem){
            that.$message({
                message: '无效数据，请重新加载该界面数据',
                type: 'warning'
            });
            return;
        }
        for(var key in that.dialog.data){
            if(modifyItem[key.toLowerCase()]!==undefined){
                that.dialog.data[key]=modifyItem[key.toLowerCase()];
            }
        }
        that.dialog.step=3;
        that.dialog.visible=true;
    },
    addReceptionClick(){
        var that=this;
        that.clearDialogData();
        that.dialog.step=1;
        that.dialog.title=that.dialog.originTitle;
        that.dialog.visible=true;
    },
    addReceptionPhoneCheck(){
        var that=this;
        if(that.dialog.data.phone.length<10){
            that.$notify({
                title: '验证未通过',
                position: 'bottom-left',
                message: '请输入正确的联系电话'
            });
            return;
        }
        that.dialog.step=3;
        that.dialog.title=that.dialog.originTitle+'-【'+that.dialog.data.phone+'】'
    },
    clearDialogData(){
        var that=this;
        that.dialog.data.phone='';
        that.dialog.data.starttime='';
        that.dialog.data.endtime='';
        that.dialog.data.customerName='';
        that.dialog.data.customerGender='男';
        that.dialog.data.customerWeixin='';
        that.dialog.data.customerSource='';
        that.dialog.data.buytimes=0;
        that.dialog.data.contactType='';
        that.dialog.data.guider='';
        that.dialog.data.visitorNumber=0;
        that.dialog.data.intentionCar='';
        that.dialog.data.intentionPrice='';
        that.dialog.data.shopPrice='';
        that.dialog.data.remark='';
        that.dialog.data.customerAddressInfo.province.name='';
        that.dialog.data.customerAddressInfo.province.code='';
        that.dialog.data.customerAddressInfo.city.name='';
        that.dialog.data.customerAddressInfo.city.code='';
        that.dialog.data.customerAddressInfo.district.name='';
        that.dialog.data.customerAddressInfo.district.code='';
        that.dialog.data.customerAddressInfo.details='';
        that.dialog.data.customerAddressInfo.merge='';
        that.dialog.data.customerAddressInfo.isvalid=false;
    },
    saveReceptionClick(){
        var that=this;
        that.dialog.saveloading=true;
        setTimeout(()=>{
            that.dialog.saveloading=false;
            that.dialog.visible=false;
        },1000)
    },
    //转意向操作
    intentionClick(id){
        var that=this;
        var modifyItem=that.list.filter(o=>o.id==id)[0];
        if(!modifyItem){
            that.$message({
                message: '无效数据，请重新加载该界面数据',
                type: 'warning'
            });
            return;
        }
        that.dialogIntention.title='转意向 - '+modifyItem.customername;
        that.dialogIntention.data.phone=modifyItem.phone;
        that.dialogIntention.data.car='';
        that.dialogIntention.data.intentionLevel='';
        that.dialogIntention.visible=true;
    },
    deleteClick(id){
        var that=this;
        //删除该行记录
        var index=that.list.findIndex(item=>item.id==id);
        that.list.splice(index,1);

        that.$message({
            message: '删除成功',
            type: 'success'
        });
    },
    analyzeClick(){
        this.$router.push({path:'/presalemanage/reception/receptionanalyze'})
    }
  }
}
</script>

<style scoped>
    .ci>.item.ld{
        padding:5px 10px;
    }
    .ci>.item.ld>fieldset{
        width:100%;
    }
    .fd-content>.fd-item{
        padding:5px 10px; display: flex;
    }
    .fd-content>.fd-item>span.name{
        width:100px; display: flex; align-items: center;
    }
</style>